<template>
    <div class="title" v-if="isShowTitle">
        <span class="main-title">{{ titleText }}</span>
        <span v-if="store.stateOperation === 3" class="user-name">处理人：{{ userName }}</span>
    </div>
    <div style="height: 478px">
        <w-table ref="tableRef" :isShowPagination="false" class="order-detail-table" style="height: 100%" :propTableConfig="tableConfig" @selectChange="selectChange" :selectable="selectable">
            <template #check="{ scope }">
                <el-select v-model="scope.row.check" placeholder="请选择检查结果" :suffix-icon="CaretBottom">
                    <el-option v-for="select in scope.row.checks" :key="select.value" :label="select.label" :value="select.value" />
                </el-select>
            </template>
            <template #handle="{ scope }">
                <el-select v-model="scope.row.handle" placeholder="请选择处置方式" :suffix-icon="CaretBottom" :disabled="scope.row.disable">
                    <el-option v-for="select in scope.row.handles" :key="select.value" :label="select.label" :value="select.value" />
                </el-select>
            </template>
        </w-table>
    </div>
</template>

<script setup>
import { CaretBottom } from "@element-plus/icons-vue";
import { provide, ref, watch } from "vue";
import { useReportOrderDetail } from "@/store/reportOrderDetail.js";

const props = defineProps({
    tableConfig: {
        type: Array,
        default: () => []
    },
    isShowTitle: {
        type: Boolean,
        default: true
    },
    titleText: {
        type: String,
        default: ""
    },
    userName: {
        type: String,
        default: ""
    }
});
const selectable = (row, index) => {
    return false;
};
const tableRef = ref(null);
const store = useReportOrderDetail();
const selectChange = (value) => {
    store.treeSelectNode.hot = value.flat();
    const find = store.treeData.find((item) => item.id === store.treeSelectNode.parentId);
    find.hot = find.childList.reduce((p, i) => p + i.hot.length, 0);
};
watch(
    () => store.treeSelectNode.tableData,
    (newValue) => {
        if (!newValue) return;
        newValue.forEach((item) => {
            if (item.check == "否" || item.check == "无") {
                item.disable = true;
                item.handle = "";
            } else {
                item.disable = false;
            }
            if (item.check && item.handle) {
                tableRef.value.tableRef.toggleRowSelection(item, true);
            } else {
                tableRef.value.tableRef.toggleRowSelection(item, false);
            }
        });
        store.treeSelectNode.hot = newValue.filter((item) => item.check && item.handle && (item.check !== "否" || item.check !== "无"));
        const find = store.treeData.find((item) => item.id === store.treeSelectNode.parentId);
        find.hot = find.childList.reduce((p, i) => p + i.hot.length, 0);
    },
    {
        deep: true
    }
);
provide("isShowSelect", store.stateOperation === 1);

defineExpose({
    tableRef
});
</script>

<style lang="scss" scoped>
.title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    .main-title {
        font-size: 16px;
        font-weight: 600;
    }
    .user-name {
        font-size: 14px;
        color: #1b3646;
    }
}
::v-deep(.el-table__header-wrapper .cell .el-checkbox) {
    visibility: hidden;
}
.handler {
    margin-bottom: 16px;
    font-size: 14px;
    span {
        &:first-child {
            color: #1b3646;
        }
        &:last-child {
            color: #595959;
        }
    }
}
</style>
